<template>
    <div id="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import *  as Cesium from 'cesium';
import { Viewer } from 'cesium';

onMounted(() => {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwMmYwMzUyYy1mYWFjLTQwY2YtODU2ZS04M2MzYjBmMmY4NGIiLCJpZCI6MTMxNzIzLCJpYXQiOjE2ODA0MjQ0OTd9.iwKk8S8ksQywUKvLxEWrsfa71fZrhR8iDPbcSNAqPbw';
    const viewer = new Viewer('cesiumContainer', {
        // scene3DOnly: true,
        selectionIndicator: false,
        // baseLayerPicker: false
    });
    // Remove default base layer
    viewer.imageryLayers.remove(viewer.imageryLayers.get(0));

    // Add Sentinel-2 imagery
    viewer.imageryLayers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3954 }));

    // Load Cesium World Terrain
    // viewer.terrainProvider = Cesium.createWorldTerrain({
    //     requestWaterMask: true, // required for water effects
    //     requestVertexNormals: true // required for terrain lighting
    // });

    // Enable depth testing so things behind the terrain disappear.
    // viewer.scene.globe.depthTestAgainstTerrain = true;

    // Enable lighting based on sun/moon positions
    // viewer.scene.globe.enableLighting = true;

    // Create an initial camera view
    // var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
    // var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
    // var homeCameraView = {
    //     destination: initialPosition,
    //     orientation: {
    //         heading: initialOrientation.heading,
    //         pitch: initialOrientation.pitch,
    //         roll: initialOrientation.roll
    //     }
    // };
    // // Set the initial view
    // viewer.scene.camera.setView(homeCameraView);

    // Add some camera flight animation options
    // homeCameraView.duration = 2.0;
    // homeCameraView.maximumHeight = 200000;
    // homeCameraView.pitchAdjustHeight = 200000;
    // homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
    // // Override the default home button
    // viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    //     e.cancel = true;
    //     viewer.scene.camera.flyTo(homeCameraView);
    // });

    // Set up clock and timeline.
    // viewer.clock.shouldAnimate = true; // make the animation play when the viewer starts
    // viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
    // viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2017-07-12T16:00:00Z");
    // viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2017-07-11T16:00:00Z");
    // viewer.clock.multiplier = 6000; // sets a speedup
    // viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // tick computation mode
    // viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // loop at the end
    // viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // set visible range

    var options = {
        camera: viewer.scene.camera,
        canvas: viewer.scene.canvas,
        screenOverlayContainer: viewer.container,
    };

    var dataSourcePromise = Cesium.KmlDataSource.load('/cesium/gdpPerCapita2008.kmz', options);
    // viewer.dataSources.add(dataSourcePromise);
    dataSourcePromise.then(dataSource => {
        // Add the new data as entities to the viewer
        viewer.dataSources.add(dataSource);

        // Get the array of entities
        var geocacheEntities = dataSource.entities.values;
        // debugger
        for (var i = 0; i < geocacheEntities.length; i++) {
            var entity = geocacheEntities[i];
            if (Cesium.defined(entity.billboard)) {
                // Entity styling code here
            }
        }
    })
    viewer.camera.flyHome(0);

})
</script>

<style lang="scss" scoped></style>